import React from 'react';
import styles from './entranceGuard.less';
import {
  DatePicker,
  Space,
  Button,
  Input,
  Table,
  Form,
  Select,
  message,
  Spin,
} from 'antd';

const { RangePicker } = DatePicker;
const { Option } = Select;
import { Import, ImportObject } from './import';
import request from '@/http';
import qs from 'qs';

export default () => {
  const [loadingState, setLoadingState] = React.useState({ loading: true });
  const [dataSource, setDataSource] = React.useState<any[]>([]);
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 30,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '50', '200', '500'],
  });

  const [ImportEditObject, setImportEditObject] = React.useState<ImportObject>({
    isModalVisible: false,
  });
  const [formObject] = Form.useForm();

  const loadDataSource = async (
    dataParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const ds = {
      ...dataParams,
      currentPage: pageValue,
      size: pageSizeValue,
    };
    console.log(ds);
    const result: any = await request.post(
      '/api/admin/attendance/SelPunchRecord',
      qs.stringify(ds),
    );
    console.log(result);
    if (result.code === 200) {
      const data: any = result.data.data.map((user: any) => ({
        key: `user_${user.id}`,
        id: user.id,
        punchDate: user.punchDate, //日期
        studentNo: user.studentNo, //学号
        studentName: user.studentName, //姓名
        punchTime: user.punchTime, //打卡时间
        equipment: user.equipment, //打卡设备
      }));

      const newPageObject = {
        ...pagination,
        current: pageValue,
        size: pageSizeValue,
        total: result.total,
      };
      setPagination(newPageObject);
      setDataSource(data);
      setLoadingState({ loading: false });
    }
  };
  //搜索
  const searchOnClick = async () => {
    setLoadingState({ loading: true });
    console.log(formObject.getFieldsValue());
    const data = await formObject.validateFields();

    var ds = {
      ...data,
      startDate: data.punchDate ? data.punchDate[0].format('yyyy-MM-DD') : '',
      endDate: data.punchDate ? data.punchDate[1].format('yyyy-MM-DD') : '',
    };
    console.log(data);

    await loadDataSource(ds, 1, pagination.pageSize);
  };

  React.useEffect(() => {
    loadDataSource(null, 1, pagination.pageSize).finally();
  }, []);

  const pageOnChange = async (page: any) => {
    await loadDataSource(
      formObject.getFieldsValue(),
      page.current,
      page.pageSize,
    );
  };

  async function ImportEditOnClose(page: any) {
    await loadDataSource(
      formObject.getFieldsValue(),
      page.current,
      page.pageSize,
    );
  }

  const importRecord = async (user: any) => {};

  return (
    <div className="pageMain">
      <div className="pageContent">
        <div className="search" style={{ width: '1300px', height: '100px' }}>
          <div className={styles.searchForm}>
            <Form layout="inline" form={formObject}>
              <Form.Item label="日期" name="punchDate">
                <RangePicker format="YYYY-MM-DD" />
                {/*<DatePicker*/}
                {/*  style={{ width: 220 }}*/}
                {/*  className="entranceGuardSelect"*/}
                {/*/>*/}
              </Form.Item>
              <Form.Item label="姓名" name="studentName">
                <Input className="entranceGuardInput" placeholder="请输入..." />
              </Form.Item>
              <Form.Item label="学号" name="userNo">
                <Input className="entranceGuardInput" placeholder="请输入..." />
              </Form.Item>
              <Form.Item>
                <Button type="primary" onClick={searchOnClick}>
                  查询
                </Button>
                <Button
                  style={{ marginLeft: '20px' }}
                  onClick={() => {
                    formObject.resetFields();
                  }}
                >
                  重置
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>

        <div className={styles.mainTable}>
          <Button
            onClick={() => {
              setImportEditObject({
                isModalVisible: true,
              });
            }}
            style={{ marginBottom: '10px', marginRight: '5px' }}
          >
            导入
          </Button>
          <Button
            style={{ marginBottom: '10px', marginRight: '5px' }}
            onClick={() => {
              location.href = 'http://47.106.181.87:8086/ExportModelExcel';
            }}
          >
            导入模板
          </Button>
          <Button
            style={{ marginBottom: '10px' }}
            onClick={() => {
              location.href = 'http://47.106.181.87:8086/ExportExcel';
            }}
          >
            导出
          </Button>
          <Spin tip="Loading..." spinning={loadingState.loading}>
            <Table
              columns={[
                {
                  title: '日期',
                  dataIndex: 'punchDate',
                  key: 'punchDate',
                  width: 75,
                  align: 'center',
                },
                {
                  title: '姓名',
                  dataIndex: 'studentName',
                  key: 'studentName',
                  width: 75,
                  align: 'center',
                },
                {
                  title: '学号',
                  dataIndex: 'studentNo',
                  key: 'studentNo',
                  width: 75,
                  align: 'center',
                },
                {
                  title: '打卡时间',
                  dataIndex: 'punchTime',
                  key: 'punchTime',
                  width: 75,
                  align: 'center',
                },
                {
                  title: '打卡设备',
                  dataIndex: 'equipment',
                  key: 'equipment',
                  width: 100,
                  align: 'center',
                },
              ]}
              dataSource={dataSource}
              pagination={pagination}
              onChange={pageOnChange}
              tableLayout="fixed"
              bordered
            />
          </Spin>
        </div>
        <Import editObject={ImportEditObject} onClose={ImportEditOnClose} />
      </div>
    </div>
  );
};
